<template>
    <div>
        我是一个不知名的底部 <div ref="versionRef">  {{ version }} </div> 
        <button @click="firedInft">我是ft的按钮</button>
    </div>
</template>


<script setup>
// 默认情况下  <script setup> 组件是关闭的(这里声明所有的内容都不会被外部访问)

// script如果加上了 setup标识那么这里面的逻辑代码都会自动的
// 按照 组合式api的语法执行 并且 最终自动返回所有声明的变量
import { ref, defineProps ,defineEmits,onMounted ,defineExpose} from 'vue'
const version = ref('2.0.0')

// 在 script setup语法当中 使用defineProps来定义接受自定义属性
// defineProps传入的值就是 option api当中 props的配置项的值
const props = defineProps(['a','b'])

// defineEmits([支持的自定义事件的事件名组成的数组])
const emit = defineEmits(['kfc']);

const firedInft = ()=>{
    emit('kfc',888888)
}

//  在setup当中 我们需要先创建一个ref对象
// 如果模板当前的html标签使用了 ref="versionRef" 
// 那么 这个节点对象就会跟 对应的ref对象绑定  通过 versionRef.value 就可以访问到这个 节点对象
const versionRef = ref(null);   // versionRef.value => 配置api中的 this.$refs.versionRef

onMounted(()=>{
    console.log('mounted in ft', versionRef.value)
})

onMounted(()=>{
    console.log('props in ft', props)
})

// 通过 defineExpose 可以把内容你希望暴露给外部使用的属性或者访问暴露出去
defineExpose({
    version,
    firedInft
})

</script>


<style>
</style>